<template>
  <div class="news">
    <div class="row center" style="margin-bottom: 24px">
      <span class="divider"></span>
      <span class="title"> 新闻 </span>
      <span class="divider"></span>
    </div>
    <el-tabs
      type="border-card"
      v-model="activeName"
      style="background-color: white; width: 60%"
    >
      <el-tab-pane label="研究会动态" name="研究会动态">
        <articles
          width="100%"
          margin="0"
          :border="false"
          type="研究会动态"
          :have-title="false"
        />
      </el-tab-pane>
      <el-tab-pane label="行业风采" name="行业风采">
        <articles
          width="100%"
          margin="0"
          :border="false"
          type="行业风采"
          :have-title="false"
        />
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import articles from './articles.vue'
const activeName = ref('研究会动态')
</script>

<style scoped>
.news {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.divider {
  width: 120px;
  height: 2px;
  background: #205ab4;
  display: block;
}
.title {
  font-size: xx-large;
  font-weight: 600;
  margin: 24px;
}
</style>
